import React from 'react';
import { useSelector } from 'react-redux';
import { Breadcrumb } from '@/components';
import { useLocation } from 'react-router-dom';
import { RootState } from '@/store'
import { IRouter } from '@/router/router.d'
import './index.scss';

interface headingProp {
  title?: string,
  hiddenTitle?: boolean,
  RightRender?: React.FC
}

const HeadingRender: React.FC<headingProp> = (prop) => {
  const {
    title,
    hiddenTitle,
    RightRender
  } = prop;

  return (
    <div className="hi-page-header-heading">
      <div className="hi-page-header-heading-left">
        {title && !hiddenTitle && <div className="hi-page-header-heading-title">{title}</div>}
      </div>
      {RightRender && <div className="hi-page-header-heading-right">
        <RightRender />
      </div>}
    </div>
  )
}


interface PageContinerProps {
  hiddenBreadcrumb?: boolean; // 是否在当前页显示面包屑，默认显示
  hiddenTitle?: boolean; // 是否在当前页显示标题，默认显示
  HeadContentRender?: any; // 头部内容区插槽
  HeadTopRightRender?: React.FC; // 头部顶部插槽
}

const PageContiner: React.FC<PageContinerProps> = (props) => {
  const { pathname } = useLocation<string>();
  const flattenRouters = useSelector((state: RootState) => state.global.flattenRouters);
  const routeConf: IRouter = flattenRouters.filter((route: IRouter) => route.path === pathname)[0];
  const adaption: boolean = routeConf && routeConf.meta && routeConf.meta.adaption === false ? false : true;

  const {
    hiddenBreadcrumb,
    hiddenTitle,
    children,
    HeadContentRender,
    HeadTopRightRender
  } = props;

  return (
    <>
      <div className="hi-page-global-header__wrap">
        <div className="hi-page-global--top">
          {!hiddenBreadcrumb && <Breadcrumb />}
          {
            ((!hiddenTitle && routeConf?.meta?.title) || HeadTopRightRender)
            &&
            <HeadingRender
              title={routeConf?.meta?.title}
              hiddenTitle={hiddenTitle}
              RightRender={HeadTopRightRender}
            />
          }
          {
            HeadContentRender && <div className="hi-page-header-content">
              {HeadContentRender()}
            </div>
          }
        </div>
      </div>
      <div className={`hi-page-global-content ${adaption ? 'self-adaption' : ''}`}>{children}</div>
    </>
  )
}

export default PageContiner;
